@charset 'utf-8';
@color:#ccc;
@color-a:white;
@color-b:#FF5C00;
.tru{
      background-image: url(../img_03/fu_xuan_kuang_back.png)!important;
      // background-size: 15px 15px;
      // background-repeat: no-repeat;
}
.head{
  width: 100%;
  background-color: #f5f5f5;
  border-bottom: 1px solid #eee;
  height: 39px;
  >.center{
    width: 1190px;
    >ul{
      >li{
        height: 39px;
        line-height: 39px;
        float: left;
        margin-right: 7px;
        padding: 0 3px;
        position: relative;
        font-size: 12px;
        color: #6C6C6C;
       
        >a{
          display: block;
          font-size: 12px;
        color: #6C6C6C;
        padding-right: 10px;
        &:hover >span{
          transform: rotate(180deg);
          top: 13px;
        }
       
        &:hover{
          color: red;
        }
        >span{
          position:absolute;
          top: 18px;
          right: 0;
          display: block;
          width:0;
          height:0;
          border:4px solid transparent;
          border-top-color:rgb(154, 154, 154);
        }
       
        }
        >div{
          position: absolute;
          top: 39px;
          left: -1px;
          display: none;
          border: 1px solid #ccc;
            border-top: none;
            text-indent: 10px;
            z-index: 1000;
        }
        &:hover >div{
          display: block;
        }
      }
    }
    >ul:nth-child(1){
      float: left;
      >li:nth-child(1){
        &:hover{
          background-color: white;
          border: 1px solid #ccc;
          border-bottom: none;
        }
       
          >div{
            width: 247px;
            height: 150px;
            background-color: white;
            z-index: 1000;
            >ul{
              >li{
                float: right;
                font-size: 12px;
                // color: #6C6C6C;
              }
              >li:nth-child(2){
                color: #6C6C6C;
              }
            }
            >dl{
              margin-top: 20px;
              >dt{
                float: left;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                overflow: hidden;
                margin-left: 20px;
                margin-right: 20px;
                >img{
                  width: 80px;
                  height: 80px;

                }
              }
              >dd{
                float: left;
                >p{
                  clear: both;
                }
              }
            }
            >a{
              width: 95%;
              height: 25px;
              line-height: 25px;
              background-color: #FFF0E8;
              color: #6C6C6C;
              display: block;
              margin: 0 auto;
              border-radius: 3px;
              text-align: center;
              &:hover{
                color: red;
              }
            }
         
        }
      }
    }
    >ul:nth-child(2){
      float: right;
      >li:nth-child(2){
        &:hover{
          background-color: white;
          border: 1px solid #ccc;
          border-bottom: none;
        }
       
          >div{
            width: 80px;
            height: 80px;
            background-color: white;
          }
        
      }
      >li:nth-child(4){
        &:hover{
          background-color: white;
          border: 1px solid #ccc;
          border-bottom: none;
        }
        
          >div{
            width: 80px;
            height: 80px;
            background-color: white;
          }
        
      }
      >li:nth-child(8){
        &:hover{
          background-color: white;
          border: 1px solid #ccc;
          border-bottom: none;
        }
       
          >div{
            width: 92px;
            height: 280px;
            background-color:white;
          }
       
      }
      >li:nth-child(9){
        &:hover{
          background-color: white;
          border: 1px solid #ccc;
          border-bottom: none;
        }
        
          >div{
            width: 80px;
            height: 150px;
            
            background-color: white;
          }
       
      }

    }
 
  }
}
.seach{
     width: 100%;
     background-color: #fff;
     margin-bottom: 24px;
     height: 80px;
  >.center{
    width: 1190px;
    height: 100%;
    >div:nth-child(1){
      height: 58px;
      width: 142px;
      padding-top: 10px;
      margin-left: 10px;
      >a{
        display: block;
        background-image: url(../img_03/logo_back.png);
        background-repeat: no-repeat;
        margin-left: -26px;
        padding-top: 58px;
         width: 142px;
         height: 58px;
         text-indent: -9999px;
         background-size: 142px 58px;
         
      }
    }
    >div:nth-child(2){
      margin-top: -40px;
      width: 400px;
      height: 40px;
      float: right;
      background-color: #6C6C6C;
      position: relative;
      margin-right: 30px;
      >button{
        background-image: linear-gradient(to right,#ff9000 0,#ff5000 100%);
        background-repeat: repeat-x;
        text-align: center;
        width: 81px;
        height: 40px;
        line-height: 40px;
        // -webkit-border-radius: 38px;
        // -moz-border-radius: 38px;
        // -ms-border-radius: 38px;
        border-radius: 38px;
        color: #fff;
        background-position: 0 0;
        font-size: 18px;
        font-weight: 700;
        background-color: #ff5000;
        cursor: pointer;
        border: none;
        margin-left: 2px;
        position: absolute;
        top: 0;
        right: -30px;
        z-index: 99;
        font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
      }
      >input{
        position: absolute;
        top: 0;
        right: 30px;
        width: 300px;
        outline: none;
        border: none;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        background-color: #ebebeb;
        border: 0 none;
        z-index: 2;
        text-indent: 10px;
      //  margin-top: -5px;
      }
      >div{
        display: inline-block;
        position: absolute;
        top: 0;
        left: -20px;
        width: 104px;
        height: 40px;
        background-color: #F5F5F5;
        border-radius: 38px 0 0 38px;
        overflow: hidden;
        :hover >div{
          display: block;
        }
        >a{
          display: block;
          width: 100%;
          height: 100%;
          text-align: center;
          line-height: 40px;
        background-color: #F5F5F5;

        }
        >div{
          display: none;
          width: 104px;
          height: 80px;
          line-height: 40px;
          background-color: #F5F5F5;
          >a{
            display: block;
            width: 104px;
            height: 40px;
            color: black;
            font-size: 12px;
            text-align: center;
          }
        }
      }
    }
  }
}
.shop{
  width: 100%;
  height: 1000px;
  // background-color: #EAE8EB;
  background: linear-gradient(#F5F5F5, #E0E7EA);
  >.center{
    width: 1190px;
    position: relative;
    >div:nth-child(1){
      width: 100%;
      height: 30px;
      background-color: #F5F5F5;
    }
    //  第一类
    >div:nth-child(2){
      border-bottom: 1px solid #ccc;

      background-color: white;
      border-radius: 30px 30px 0 0;
      >span{
        margin-left: 18px;
        font-size: 20px;
        >em{
          // font-weight: 800;
          overflow: hidden;
          color: #000;
          font-size: 20px;
          font-weight: 600;
          height: 72px;
          line-height: 72px;
        }
      }
      >div{
        height: 72px;
        line-height: 72px;
        font-size: 14px;
        float: right;
        >span{
          font-size: 22px;
    color: #FF5000;
        }
        >a{
          display: inline-block;
            width: 74px;
             height: 42px;
            line-height: 42px;
            border-radius: 21px;
            text-align: center;
            text-decoration: none;
            position: relative;
            top: -2px;
            font-size: 16px;
            background-color: #908e8e;
            color: white;
            margin-right: 20px;

        }
      }
    }
    >div:nth-child(3){
      width: 100%;
      height: 50px;
      background-color: white;

      position: relative;
      >div{
        float: left;
        
      }
      >div:nth-child(1){
        width: 80px;
        height: 50px;
        position: absolute;
        left: 20px;
        top: 1px;
        width: 80px;
        font-size: 15px;
        line-height: 50px;
        color: #3c3c3c;
        font-weight: 700;
        position: relative;
        text-indent: 20px;
    >div{
      width: 15px;
      height: 15px;
      background-position: 0 0;
      overflow: hidden;
      cursor: pointer;
      position: absolute;
      top:18px;
      left: 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      // background-image: url(../img_03/fu_xuan_kuang_back.png);
      background-image: url(../img_03/fu_xuan_kuang_kong.png);
      background-size: 15px 15px;
      background-repeat: no-repeat;
      background-color: white;
    }
    // >input:checked{
    //   background-image: url(../img_03/fu_xuan_kuang_back.png);
    //   background-size: 15px 15px;
    //   background-repeat: no-repeat;
    // }

      }
      >div:nth-child(2){
        width: 225px;
        height: 50px;
        padding-left: 117px;
        line-height: 50px;
    color: #3c3c3c;
    font-weight: 700;
      }
      >div:nth-child(3){
        width: 202px;
        height: 50px;
        line-height: 50px;
    color: #3c3c3c;
    font-weight: 700;
      }
      >div:nth-child(4){
        width: 130px;
        height: 50px;
        padding: 0 0 0 10px;
    font-size: 13px;
    line-height: 50px;
    color: #3c3c3c;
    font-weight: 700;

      }
      >div:nth-child(5){
        width: 120px;
        height: 50px;
        line-height: 50px;
        color: #3c3c3c;
        font-weight: 700;
      }
      >div:nth-child(6){
        width: 140px;
        height: 50px;
        line-height: 50px;
    color: #3c3c3c;
    font-weight: 700;
      }
      >div:nth-child(7){
        width: 72px;
        height: 50px;
        line-height: 50px;
    color: #3c3c3c;
    font-weight: 700;
      }

    }
    //  第二类
    >.dianpu{
      width: 100%;
      background-color: white;
      >div:nth-child(1){
        font-size: 12px;
        color: black;
        text-indent: 50px;
        position: relative;
        height: 38px;
        line-height: 38px;
        >div{
          -webkit-appearance: none;
          width: 15px;
          height: 15px;
          background-position: 0 0;
          overflow: hidden;
          cursor: pointer;
          position: absolute;
          top:10px;
          left: 30px;
          background-image: url(../img_03/fu_xuan_kuang_kong.png);
          background-size: 15px 15px;
          background-repeat: no-repeat;
        }
        // >input:checked{
        //   background-image: url(../img_03/fu_xuan_kuang_back.png);
        //   background-size: 15px 15px;
        //   background-repeat: no-repeat;

        // }
        >a{
          color: #3c3c3c;
          height: 38px;
        line-height: 38px;
        }
        >.xiaoshuidi{
          display: block;
          position: absolute;
          top: 10px;
          left: 200px ;
          // margin-top: 10px;
          width: 38px;
          height: 38px;
          background-image: url(../img_02/xiao_shui_di.gif);
          background-repeat: no-repeat;
          background-position:-102px -5px ;
          background-size: 160px;
          text-decoration: none!important;
          width: 20px;
          height: 20px;
          zoom: 1;
        }
      }
      //   .shang  pin 
      >.shangpin{
        border: 1px solid white;
        //  #f40      back:  #FFF9F6
        background-color: #F5F5F5;
        width: 1138px;
        margin:0 auto ;
        border-radius: 30px;
        overflow: hidden;
        
       
          >div:nth-child(1){
            width: 100%;
            height: 18px;
            padding: 10px 0;
            border-bottom: 1px solid #ccc;
            
            >img{
              height: 18px;
              display: block;
              float: left;
              margin-left: 90px;
              margin-right: 10px;
            }
            >span{
              height: 18px;
              line-height: 1;
              font-size: 12px;
  
            }
          }
          //       第三类 
          >.xijie{
            // &:hover >div:nth-child(3){border: 1px dashed #F5F5F5;}
            >div{
              float: left;
              padding-top: 20px;
            }
            >div:nth-child(1){
              margin-left:30px;
              margin-right:30px;
  
              >div{
                width: 15px;
                height: 15px;
                background-image: url(../img_03/fu_xuan_kuang_kong.png);
                background-size: 15px 15px;
                background-repeat: no-repeat;
              }
              // >input:checked{
              //   background-image: url(../img_03/fu_xuan_kuang_back.png);
              //   background-size: 15px 15px;
              //   background-repeat: no-repeat;
              // }
            }
            >div:nth-child(2){
              height: 110px;
              >dl{
                 >dt{
                  width: 80px;
                  height: 80px;
                  float: left;
                  margin-right: 5px;
                  position: relative;
                  >img{
                    width: 80px;
                    height: 80px;
                  }
                  &:hover >div{
                    display: block;
                  }
                  >div{
                    display: none;
                    position:absolute;
                    top: -80px;
                    right: -260px;
                    width: 240px;
                    height: 240px;
                    border: 1px solid #ccc;
                    z-index: 10;
                    >img{
                      width: 240px;
                      height: 240px;
                    }
                    >span{
                      width: 10px;
                      height: 10px;
                      border-left: 1px solid #ccc;
                      border-bottom: 1px solid #ccc;
  
                      transform: rotate(45deg);
                      background-color: white;
                      
                      
                      display: block;
                      position: absolute;
                      top: 0;
                      bottom: 0;
                      left: -7px;
                      margin: auto  ;
  
                    }
  
                  }
  
                 }
                 >dd{
                  width: 240px;
                  height: 80px;
                  float: left;
                  position: relative;
                  >p{
                    >a{
                      display: block;
                      font: 12px;
                      color: #6C6C6C;
                      max-height: 36px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
                      &:hover{
                        color: red;
                        text-decoration: underline;
                      }
  
                    }
                  }
                  >div{
                   position: absolute;
                   bottom: 0;
                   left: 0;
                    >img{
                      float: left;
                      margin-right: 5px;
                    }
                  }
                 }
              }
            }
            >div:nth-child(3){
              height: 110px;
              padding-left: 20px;
              padding-right: 20px;
              position: relative;
              border: 1px dashed #F5F5F5;
  
              &:hover{
                border: 1px dashed #ff5000;
                background-color: white;
              }
              &:hover >span{
                display: block;
              }
  
              >P{
                font-size:12px ;
                color: #6C6C6C;
                font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
  
                }
                >span{
                  display: none;
                  font-size:12px ;
                  font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
                  position: absolute;
                  top: 0;
                  right: 0;
                  background-color: #ff5000;
                  color: white;
                }
            }
            >div:nth-child(4){
              width: 100px;
              color: #3c3c3c;
              font-weight: 700;
              font-family: Verdana,Tahoma,arial;
            }
            >div:nth-child(5){
              width: 90px;
              margin-left: 18px;
              >dl{
                >dt{
                  >span{
                    display: inline-block;
                    text-align: center;
                    width: 20px;
                    height: 22px;
                    border: 1px solid #f6b158af;
  
                    background-color: #FFF0E7;
  
                    &:hover{
                      color: #ff5000;
                      border: 1px solid #ff5000;
                      cursor: pointer;
                    }
                  }
                  >input{
                    width: 44px;
                    text-indent: 18px;
                    height: 22px;
                    outline: none;
                    border: none;
                    border: 1px solid #f6b158af;
                 
                  }
                }
                >dd{
                  width: 88px;
                  background-color: #FFF0E7;
                  border: 1px solid #ff9000;
  
                  >P{
                   color: #6C6C6C;
  
                   text-align: center;
                   font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
                  }
                 }
              }
             
            }
            >div:nth-child(6){
              width: 120px;
              margin-left: 43px;
              >P{
                color: red;
                font-weight: 700;
                >em{
                  color: red;
                  font-weight: 700;
                }
              }
              >div{
                color: #6C6C6C;
                font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
              }
            }
            >div:nth-child(7){
                 margin-left: 30px;
              >a{
                 display: block;
                 font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
                 color: #6C6C6C;
                &:hover{
                  color: #ff5000;
                  text-decoration: underline;
                }
              }
            }
  
          }
        
       
      }
    }

    >.sticks{
      position: sticky;
      bottom: 0;
      
      width: 1190px;
      height: 72px;
      background-color: white;
      border-top: 1px solid #ccc;
      >div{
        width: 1142px;
        height: 100%;
        margin-left: 24px;
        >div:nth-child(1){
          position: relative;
          width: 60px;
          div{
            position: absolute;
            top: 30px;
            left: 20px;
            width: 15px;
            height: 15px;
            background-image: url(../img_03/fu_xuan_kuang_kong.png);
            background-size: 15px 15px;
            background-repeat: no-repeat;
          }
          // >input:checked{
          //   background-image: url(../img_03/fu_xuan_kuang_back.png);
          //   background-size: 15px 15px;
          //   background-repeat: no-repeat;
  
          // }
          >span{
            position: absolute;
            top: 0px;
            left: 40px;
            width: 50px;
            height: 72px;
            line-height: 72px;
            font-size: 14px;
            color: #6C6C6C;
          }
        }
        >div:nth-child(2){
          width: 150px;
          float: left;
          margin-left: 80px;
          height: 72px;
          >a{
            float: left;
            display: block;
            width: 75px;
            font-size: 14px;
            color: #6C6C6C;
            height: 72px;
            line-height: 72px;
            &:hover{
              color: #ff5000;
              text-decoration:  underline #ff5000;
            }
          }

        }
        >div:nth-child(3){
          float: right;
          height: 72px;
          line-height: 72px;
          >div{
            float: left;
          }
          >div:nth-child(1){
            font-size: 14px;
            color: #3c3c3c;
            height: 72px;
            line-height: 72px;
            >span{
              color: #f40;
              font-size: 22px;

               font-weight: 700;
                font-family: tohoma,arial;
                padding:0 10px;
            }
          }
          >div:nth-child(2){
            margin-left: 30px;
            font-size: 14px;
            color: #3c3c3c;

            height: 72px;
            line-height: 72px;
            >em{
              font-weight: 700;
              font-size: 22px;
              padding: 0 6px;
              color: #f40;
              font-family: tohoma,arial;
            }
          }
          >div:nth-child(3){
            margin-left: 30px;

            font-size: 14px;
            color: #3c3c3c;
            
            height: 72px;
            line-height: 72px;
            >a{
              cursor: not-allowed;
    text-decoration: none;
    display: inline-block;
    width: 74px;
    height: 42px;
    line-height: 42px;
    color: #fff;
    background: #B0B0B0;
    text-align: center;
    border-radius: 30px;
            }
          }

        }

      }
    }
  }
}


